<template>
  <div class="message-box" :class="{'editable': isEditable, 'has-border': hasBorder}">
    <div class="title" :class="{'is-require': isRequire}">{{label}}
      <slot name="label"></slot>
    </div>
    <div class="content" :class="{'line-limit': isLineLimit}">
       <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'XmListItem',
  data () {
    return {}
  },
  props: {
    label: {
      type: [String, Number],
      default: ''
    },
    isRequire: {
      type: Boolean,
      default: false
    },
    isEditable: {
      type: Boolean,
      default: false
    },
    // 强制显示边框
    hasBorder: {
      type: Boolean,
      default: false
    },
    isLineLimit: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/default.styl'

.message-box
  position relative
  padding 0.3rem 0.3rem 0.3rem 3rem
  box-sizing border-box
  min-height 1.2rem
  border-bottom 1px solid lightGray
  font-size fSizeL
  background-color #fff
  &.editable
    padding-right 1rem
    &:after
      position absolute
      top 50%
      right 0
      content '>'
      transform translateY(-50%) scaleY(1.8)
      width 1rem
      height 1rem
      line-height 1rem
      text-align center
      color #aaa
  &:last-child
    border-bottom 0
  &.has-border
    border-bottom 1px solid lightGray
  .title
    position absolute
    left 0.4rem
    top 50%
    transform translateY(-50%)
    width 5rem
    height auto
    word-wrap break-word
    color deepGray
    font-weight 500
  .is-require::before
    content: "*"
    margin-right: 4px
    position absolute
    left -.75em
    color: #c0252e
    font-size .8em
  .content
    width 100%
    color Gray
    text-align right
    line-height 0.6rem
    word-wrap break-word
</style>
